<template>
    <div>
        <nav>
            <el-row type="flex" justify="space-between">
                <el-col class="nav-col" :span="8">
                    <nuxt-link class="logo" :to="'/'+$store.state.domain">
                        <div v-if="logoPath">
                            <img :src="logoPath" height="48px;" alt="">
                        </div>
                        <div v-else>
                            <span v-if="corpName">{{corpName}}</span>
                        </div>
                    </nuxt-link>
                </el-col>
                <el-col class="nav-col" :span="8">
                    <el-input size="large" class="search-input" placeholder="请输入商品名称或型号" v-model="keyword" icon="search" @keyup.enter.native="handleSearch" :on-icon-click="handleSearch">
                    </el-input>
                </el-col>
                <el-col class="nav-col" :span="8">
                    <nuxt-link :to="'/'+$store.state.domain+'/cart'" class="topnav-link">
                        <i class="cart-icon"></i>
                        <el-badge v-if="cartCount>0" class="cart-count" :max="99" :value="cartCount" />
                    </nuxt-link>
                    <nuxt-link :to="'/'+$store.state.domain+'/info'" class="topnav-link">
                        <i class="corp-icon"></i>
                    </nuxt-link>
                </el-col>
            </el-row>
        </nav>
        <aside>
            <div class="classify">
                <scroll-view ref="scrollView">
                    <ul slot="view">
                        <li class="h25"></li>
                        <li :class="{'cur-classify' : currentClassify.id == -1}" @click="changeClassify({categoryId:-1,name:'全部分类'})">
                            <a href="javascript:void(0);">
                                <i>
                                    <img src="~assets/images/icon.png" alt="">
                                </i>全部分类</a>
                        </li>
                        <li v-for="(item,index) in categoryList" :class="{'cur-classify' : currentClassify.id == item.categoryId}" @click="changeClassify(item)">
                            <a href="javascript:void(0);">
                                <i>
                                    <img :style="{marginTop:-(getIconIndex(item.name))*42 + 'px'}" src="~assets/images/icon.png" alt="">
                                </i>{{item.name}}</a>
                        </li>
                        <li class="h25"></li>
                    </ul>
                </scroll-view>
            </div>
        </aside>
        <article ref="view">
            <nuxt/>
        </article>
    </div>
</template>

<script>

import ScrollView from '~components/ScrollView'
import { Row, Col, Input, Badge } from 'element-ui'
import { mapState, mapMutations } from 'vuex'
import { getSideBarIconIndexByName } from '../service/Utils'
export default {
    components: {
        ScrollView,
        'el-row': Row,
        'el-col': Col,
        'el-input': Input,
        'el-badge': Badge,
    },
    middleware: 'domain',
    head () {
        return {
            title: this.$store.state.corpName,
        }
    },
    data () {
        let keyword = ''
        let { main_category: mainCategory, keyword: queryKeyword } = this.$route.query
        if (!mainCategory && this.$route.query.keyword) {
            keyword = queryKeyword
        }
        return {
            keyword,
        }
    },
    mounted () {
        this.$store.commit('refreshCart')
    },
    watch: {
        '$route': function ({ query }) {
            this.$refs.view.scrollTop = 0
            if (query.main_category) {
                this.keyword = ''
            } else {
                this.setClassify({
                    id: -1,
                    name: '全部分类',
                })
            }
        },
    },
    computed: {
        ...mapState(['currentClassify', 'categoryList', 'logoPath', 'corpName', 'cartCount']),
    },
    methods: {
        changeClassify (item) {
            if (item.categoryId !== this.$route.params.categoryId) {
                this.setClassify({
                    id: item.categoryId,
                    name: item.name,
                })
                let query = {}
                if (item.categoryId !== -1) {
                    query.main_category = item.categoryId
                }
                this.$router.push({ name: 'domain-goods-listAll', query })
            }
        },
        getIconIndex: getSideBarIconIndexByName,
        ...mapMutations(['setClassify']),
        handleSearch: function () {
            this.$router.push({ name: 'domain-goods-listAll', query: { keyword: this.keyword } })
        },
    },
}
</script>

<style lang="scss" scoped>
nav {
    box-shadow: 0 0 10px #e5e5e5;
    background-color: #fff!important;
    position: fixed!important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    min-height: 60px!important;
    border-radius: 0!important;
    margin-bottom: 0!important;
    border: none!important;
    border-bottom: 1px solid #ddd!important;
    height: 90px;
    .nav-col {
        height: 90px;
        line-height: 90px;
        .logo {
            padding-left: 65px;
            display: inline-block;
            img {
                vertical-align: middle;
            }
        }
    }
    .topnav-link {
        float: right;
        width: 90px;
        height: 89px;
        border-left: 1px solid #dddddd;
        text-align: center;
        padding: 0 !important;
        &:hover {
            background-color: #f7f7f7 !important;
        }
        i {
            display: inline-block;
            width: 30px;
            height: 22px;
            position: relative;
            margin-top: 33px;
        }
        i.corp-icon {
            background: url(../assets/images/corp.png) no-repeat center;
        }
        i.cart-icon {
            background: url(../assets/images/list.png) no-repeat center;
        }
        .cart-count {
            position: absolute;
            right: 20px;
            top: -5px;
            sup {
                line-height: 17px;
            }
        }
    }
}

aside {
    position: fixed;
    padding-top: 0;
    width: 280px;
    top: 90px;
    bottom: 0;
    background-color: #fafafa;
    border-right: 1px solid #ddd;
    .classify {
        height: 100%;
        overflow: hidden;
        li a {
            position: relative;
            display: block;
            height: 48px;
            line-height: 48px;
            padding: 0 30px;
            font-size: 14px;
            font-weight: bold;
            color: #666;
            text-decoration: none;
            i {
                float: left;
                width: 14px;
                height: 14px;
                margin: 17px 20px 0 0;
                overflow: hidden;
            }
            &:hover {
                background-color: #f2f2f2;
            }
        }
        .cur-classify {
            background-color: #00a2ff;
            a {
                color: #fff;
                i img {
                    margin-left: -26px;
                }
                &:after {
                    content: '';
                    float: right;
                    width: 5px;
                    height: 8px;
                    background: url(../assets/images/arrow01.png);
                    margin-top: 20px;
                }
                &:hover {
                    background-color: transparent;
                }
            }
        }
        .h25 {
            height: 25px;
        }
    }
}

article {
    overflow: auto;
    position: fixed;
    top: 90px;
    left: 280px;
    right: 0;
    bottom: 0;
    padding: 0 30px;
    background-color: #fff;
}
</style>
